﻿{include file="public/header" /}
<link rel="stylesheet" href="../../static/home/css/little_things.css">
    <!-- 主体（一般只改变这里的内容） -->
    <div class="blog-body">
        <!-- 这个一般才是真正的主体内容 -->
         <input type="hidden"  id="path" value="">
        <div class="blog-container">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
                <a href="index.html" title="网站首页">网站首页</a>
                <a href="resource.html" title="点点滴滴">点点滴滴</a>
                <a><cite>时光轴</cite></a>
            </blockquote>
            <div class="blog-main">
                <div class="child-nav shadow">
                    <span class="child-nav-btn child-nav-btn-this">时光轴</span>
                     <span class="child-nav-btn">笔记墙</span>
                </div>
                <div class="timeline-box shadow">
                    <div class="timeline-main">
                        <h1><i class="fa fa-clock-o"></i>时光轴<span> —— 记录生活点点滴滴</span></h1>
                        <div class="timeline-line"></div>
                        <div class="timeline-year">
                            <h2>
                                <a href="javascript:void(0);" class="yearToggle">2017年</a>
                                <i class="fa fa-caret-down fa-fw"></i>
                            </h2>
                            <div class="timeline-month">
                                <h3 class=" animated fadeInLeft">
                                    <a href="javascript:void(0);" class="monthToggle">2月</a>
                                    <i class="fa fa-caret-down fa-fw"></i>
                                </h3>
                                <ul>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                </ul>
                            </div>
                            <div class="timeline-month">
                                <h3 class=" animated fadeInLeft">
                                    <a href="javascript:void(0);" class="monthToggle">2月</a>
                                    <i class="fa fa-caret-down fa-fw"></i>
                                </h3>
                                <ul>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="timeline-year">
                            <h2>
                                <a href="javascript:void(0);" class="yearToggle">2017年</a>
                                <i class="fa fa-caret-down fa-fw"></i>
                            </h2>
                            <div class="timeline-month">
                                <h3 class=" animated fadeInLeft">
                                    <a href="javascript:void(0);" class="monthToggle">2月</a>
                                    <i class="fa fa-caret-down fa-fw"></i>
                                </h3>
                                <ul>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                </ul>
                            </div>
                            <div class="timeline-month">
                                <h3 class=" animated fadeInLeft">
                                    <a href="javascript:void(0);" class="monthToggle">2月</a>
                                    <i class="fa fa-caret-down fa-fw"></i>
                                </h3>
                                <ul>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                    <li>
                                        <div class="h4  animated fadeInLeft">
                                            <p class="date">02月23日 19:33</p>
                                        </div>
                                        <p class="dot-circle animated ">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </p>
                                        <div class="content animated fadeInRight">
                                            该时光轴支持手机平板PC，但并不能兼容一些老的浏览器！
                                        </div>
                                        <div class="clear"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

{include file="public/footer" /}
<script>
    layui.use('jquery', function () {
        var $ = layui.jquery;

        $(function () {
            $('.monthToggle').click(function () {
                $(this).parent('h3').siblings('ul').slideToggle('slow');
                $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
            });
            $('.yearToggle').click(function () {
                $(this).parent('h2').siblings('.timeline-month').slideToggle('slow');
                $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
            });
        });
    });
</script>